﻿
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/HT_Layout.cshtml";
}

<div class="box-body">
    <div class="btn btn-success" id="Add">用户管理</div>
    <table class="display table table-hover table-bordered datatable" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>编号</th>
                <th>账户</th>
                <th>密码</th>
                <th>邮箱</th>
                <th>真实姓名</th>
                <th>大概地址</th>
                <th>QQ</th>
                <th>头像</th>
                <th>性别</th>
                <th>生日</th>
                <th>操作</th>
            </tr>
        </thead>
    </table>
</div>


@section myScript{
    <script>
        var ff = 0;
        var el = $(".datatable");
        var url = serverPath + "HT_Customer/GetAll";
        var menthod = "get";
        var colunm = [
            { data: 'Id' },
            { data: 'CustomerName' },
            { data: 'Password' },
            { data: 'Email' },
            { data: 'CName' },
            { data: 'Areas' },
            { data: 'QQ' },
            { data: 'Avatar' },
            { data: 'Gender' },
            { data: 'Birthday' },
            { data: 'cc' },
        ];
        //初始化dataatable
        var datatable = DataTableInit(el, url, menthod, colunm);
        datatable.ajax.reload();

        $("#Add").click(function () {
            $("#myModal h3").text("添加用户");
            $.get(serverPath + "HT_Customer/Add", null, function (data) {
                $("#myModal .modal-body").html(data);
                //设置上传事件
                $("#Avatar").change(function (e) {
                    /* console.log(e)*/
                    new html5ImgCompress(e.target.files[0], {
                        before: function (file) {
                            /*console.log(file)*/
                        },
                        done: function (file, base64) {
                            $("#viewimg").attr("href", base64).show();
                            ff = base64;
                            /*console.log(base64.length);*/
                            console.log(ff);
                        }
                    });
                })

                //添加用户
                $("#myModal #btnSubmit").on("click", function () {
                    if (ff) {
                        //请求参数
                        var param = {
                            CustomerName: $("#CustomerName").val(),
                            Password: $("#Password").val(),
                            Email: $("#Email").val(),
                            CName: $("#CName").val(),
                            Areas: $("#Areas").val(),
                            QQ: $("#QQ").val(),
                            Avatar: ff,
                            Gender: $("#Gender").val(),
                            Birthday: $("#Birthday").val(),
                        }
                        console.log(param);
                        //异步提交添加请求
                        $.post(serverPath + "HT_Customer/Add", param, function (data) {
                            console.log(data);
                            if (data.Code != 200) {
                                layer.msg(data.Message);
                                return;
                            }
                            else {
                                layer.msg(data.Message);
                                $("#myModal").modal("hide");
                                datatable.ajax.reload();
                            }
                        })
                    }
                    else {
                        layer.msg("请先选择图片")
                        return;
                    }
                })
                //显示模态框
                $("#myModal").modal("show");
            })
        })

        //删除
        function Del(that) {
            layer.confirm("确定吗？", { icon: 3, title: "提示" }, function (index) {
                var id = $(that).attr("data-id")
                $.post(serverPath + "HT_Customer/Delete", { id }, function (data) {
                    if (data.Code == 200) {
                        layer.msg(data.Message);
                        datatable.ajax.reload();
                    }
                    else {
                        layer.msg(data.Message, { icon: 2 });
                    }
                })
                layer.close(index)
            })
        }

        //编辑
        function Edit(that) {
            $("#myModal h3").text("修改用户信息");
            var id = $(that).attr("data-id")
            console.log(id);
            $.get(serverPath + "HT_Customer/Edit", { id }, function (data) {
                $("#myModal .modal-body").html(data);
                //设置上传事件
                $("#Avatar").change(function (e) {
                    /* console.log(e)*/
                    new html5ImgCompress(e.target.files[0], {
                        before: function (file) {
                            /*console.log(file)*/
                        },
                        done: function (file, base64) {
                            $("#viewimg").attr("href", base64).show();
                            ff = base64;
                            /*console.log(base64.length);*/
                            console.log(ff);
                        }
                    });
                })
                $("#btnSubmit").on("click", function () {
                    $("input[type='radio']:checked").each(function () {
                        aa = $(this).val();
                    })
                    var p = {
                        Id: id,
                        CustomerName: $("#CustomerName").val(),
                        Password: $("#Password").val(),
                        Email: $("#Email").val(),
                        CName: $("#CName").val(),
                        Areas: $("#Areas").val(),
                        QQ: $("#QQ").val(),
                        Avatar: ff ? ff : $("#viewimg").attr("data-value"),
                        Gender: $("#Gender").val(),
                        Birthday: $("#Birthday").val(),
                    }
                    console.log(p);
                    $.post(serverPath + "HT_Customer/Edit", p, function (data) {
                        if (data.Code == 200) {
                            layer.msg(data.Message);
                            $("#myModal").modal("hide");
                            datatable.ajax.reload();
                        }
                    })
                });
                $("#myModal").modal("show");
            })
        }


        function viewIn(a) {
            var url = $(a).attr("href");
            var $box = $('<div id="viewbox"><img src="' + url + '"class="img-polaroid"/></div>');
            $box.appendTo("body");
            $(a).mousemove(function (e) {
                var left = e.pageX + 20;
                var top = e.pageY - 100;
                $box.css({ left, top });
                console.log(e);
            })
        }

        function viewOut(a) {
            $("#viewbox").remove();
        }
    </script>
}

@section myCss{
    <style>
        #viewbox {
            position: absolute;
            left: 0px;
            top: 0px;
            z-index: 999;
            width: 200px;
        }
    </style>

}